<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    td{
        width: 200px;
        background-color: yellow;
    }
</style>

<body>
<div id="app">

    <!--掌握！！ 遍历集合-->
    <table>
        <tr v-for="(user,index) in users" v-bind:key="user.name">
            <!--index是下标索引-->
              <td>{{index}}</td>
            <!--1.取值，插值表达式{{}}-->
              <td>{{user.name}}</td>
            <!--2.取值，v-text-->
              <td v-text="user.gender"></td>
            <!--3.取值，v-html-->
              <td v-html="user.age"></td>
        </tr>
    </table>
    <br>

    <!--了解，遍历对象user-->
      <ul>
        <li v-for="(use,key,index) in user">
            {{index}}--{{key}}--{{use}}
        </li>
      </ul>

    <span v-for="a in 'abcgvds'">
        {{a}},
    </span>
    <br>
    <span v-for="a in 10">
        {{a}},
    </span>

</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>

     var dataObj={
         name:"刘德华",
         num:0,
         users:[
             {name:'柳岩', gender:'女', age: 21},
             {name:'有哥', gender:'男', age: 30},
             {name:'范冰冰', gender:'女', age: 24},
             {name:'刘亦菲', gender:'女', age: 18},
             {name:'古力娜扎', gender:'女', age: 25}
         ],
         user:{name:'古力娜扎', gender:'女', age: 25}
     };

     var vue = new Vue({
     el:"#app",
     data:dataObj

     });

</script>
</body>
</html>